<template>
  <div>
    <el-dialog class="putdetail select-prod" title="入库单详情" :visible.sync="putdetailvis" @close="close" width="870px" append-to-body :close-on-click-modal="false">
        
        <el-row :gutter="16" style="line-height:40px">
          <el-col :span="3">入库单号：</el-col>
          <el-col :span="5">{{orderDetail.orderNum}}</el-col>
          <el-col :span="3">入库类型：</el-col>
          <el-col :span="5">{{orderDetail.typeName}}</el-col>
          <el-col :span="3">入库日期：</el-col>
          <el-col :span="5">{{orderDetail.putDate}}</el-col>
        </el-row>
        <el-row :gutter="16" style="line-height:40px">
          <el-col :span="3">联系人：</el-col>
          <el-col :span="5">{{orderDetail.putPerson}}</el-col>
          <el-col :span="3">状态：</el-col>
          <el-col v-if="orderDetail.putStatus == 2" :span="5">待入库</el-col>
          <el-col v-if="orderDetail.putStatus == 1" :span="5">已入库</el-col>
          <el-col :span="3">备注：</el-col>
          <el-col :span="5">{{orderDetail.putRemark}}</el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-table :data="tableData" border style="width: 100%">
              <!-- <el-table-column label="图片" width="60">
                <template slot-scope="scope">
                  <div>
                    <img style="width:40px;height:40px;" :src="scope.row.prodImg" alt="">
                  </div>
                </template>
              </el-table-column> -->
              <el-table-column prop="categoryTwoName" label="装备细类"></el-table-column>
              <el-table-column prop="prodName" label="名称" width="100"></el-table-column>
              <el-table-column prop="prodCode" label="装备编号"></el-table-column>
              <el-table-column prop="prodBatch" label="批次"></el-table-column>
              <el-table-column prop="prodSpecial" label="规格" width="50"></el-table-column>
              <el-table-column prop="emit" label="单位" width="50"></el-table-column>
              <el-table-column prop="prodNum" label="数量"></el-table-column>
              <el-table-column prop="areaName" label="库区"></el-table-column>
              <el-table-column prop="departmentCode" label="库位"></el-table-column>
            </el-table>
          </el-col>
        </el-row>

        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="close">关 闭</el-button>
          <el-button v-if="orderDetail.putStatus == 2" size="small" type="primary" @click="auditPass">提交</el-button>
          <!-- <el-button v-if="orderDetail.putStatus == 1" size="small" type="primary" disabled>已提交</el-button> -->
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { SubmitPutOrder } from '@/api/putstore';
export default {
  name: 'selectprod',
  props: ['openPutdetail', 'orderDetail'],
  data() {
    return {
      putdetailvis: false,
      formLabelWidth: '90px',
      categoryvalue: '',
      prod_code: '',
      prod_name: '',
      tableData: []
    }
  },
  methods: {
    close() {
      this.putdetailvis = false;
      this.$emit("update:openPutdetail", false);
    },
    selectprodSuccess() {
      this.putdetailvis = false;
      this.$emit("update:openPutdetail", false);
    },
    auditPass() {
  
      SubmitPutOrder(this.orderDetail.putId).then(res => {
        this.$message({
          message: res.data.msg,
          type: 'success'
        })
      })
      this.putdetailvis = false;
      this.$emit("update:openPutdetail", false);
    }
  },
  watch: {
    openPutdetail(newVal,oldVal) {  
      this.putdetailvis = newVal;
    },
    orderDetail(newVal) {
      this.tableData = newVal.putProds;
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,50,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }
  
</style>